<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ajax是什么</title>
</head>

<body>
  <script>
    /**
     * 第一种 ajax 的实现方式
    */
    const xhr = new XMLHttpRequest();
    // 请求类型    请求地址   是否异步
    xhr.open("GET", "http://localhost:3000", true)
    // 发送请求
    xhr.send()
    // 监听请求的状态变化
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 处理响应数据
        const resStr = JSON.parse(xhr.responseText)
        console.log("res", resStr)
      }
    }

    /**
     * 第二种
    */
    // 默认为 get 请求
    fetch("http://localhost:3000").then((res) => res.json()).then((data) => {
      console.log("data", data)
    })
    // 发起 post 请求，给服务器传递的参数存放在 body 属性上
    fetch("http://localhost:3000", {
      method: "POST",
      body: JSON.stringify({
        name: "Rex",
        age: 24
      })
    }).then((res) => res.json()).then((data) => {
      console.log("data", data)
    })
  </script>
</body>

</html>